<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div class="add-dia">
      <div class="nav">
        <div class="title">{{ state.title }}</div>
        <div class="close" @click="close">
          <i class="esayIcon esayIcon-youjiantou"></i>
        </div>
      </div>
      <div class="con">
        <n-form
          ref="ruleForm"
          :model="queryForm"
          :show-label="false"
          show-feedback
          :rules="rules"
        >
          <n-form-item require-mark-placement="left" label="名称" path="name">
            <n-input
              v-model:value="queryForm.name"
              placeholder="收藏夹名称（必填）"
              :maxlength="50"
              show-count
            />
          </n-form-item>
          <n-form-item
            require-mark-placement="left"
            label="描述"
            path="description"
          >
            <n-input
              type="textarea"
              v-model:value="queryForm.description"
              :maxlength="200"
              show-count
              placeholder="请输入描述"
            />
          </n-form-item>
        </n-form>
        <div class="tool flex">
          <n-button class="btn" @click="close">取消</n-button>
          <n-button
            class="btn confirm-btn"
            type="primary"
            :disabled="submitDis"
            @click="handSave"
          >
            确定
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import type { FormRules, FormInst } from 'naive-ui'
import { computed, reactive, ref } from 'vue'
import workApi from '@/service/api/work'
const submitDis = computed(() => {
  return !(!!queryForm.value.name && !!queryForm.value.description)
})
const emit = defineEmits(['success'])
interface queryFormState {
  id?: number | string
  name: string
  description: string
}
const queryForm = ref<queryFormState>({
  name: '',
  description: ''
})
const rules: FormRules = {
  name: [
    {
      required: true,
      message: '收藏夹名称不能为空',
      trigger: 'blur'
    }
  ],
  description: [
    {
      required: true,
      message: '描述不能为空',
      trigger: 'blur'
    }
  ]
}
const ruleForm = ref<FormInst | null>(null)
let requestLoading = false
const handSave = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      save()
    }
  })
}
const save = async () => {
  if (requestLoading) return
  requestLoading = true
  if (queryForm.value.id) {
    const { code, msg } = await workApi.edit(queryForm.value)
    if (code !== 0) {
      msgUtil.$message.error(msg)
      requestLoading = false
      return
    }
  } else {
    const { code, msg } = await workApi.add(queryForm.value)
    if (code !== 0) {
      msgUtil.$message.error(msg)
      requestLoading = false
      return
    }
  }
  msgUtil.$message.success(queryForm.value.id ? '编辑成功' : '发布成功')
  requestLoading = false
  emit('success')
  close()
}
const state = reactive({
  dialogFormVisible: false,
  title: ''
})
const close = () => {
  state.dialogFormVisible = false
}
const open = (row: any) => {
  if (row) {
    state.title = row?.id ? '编辑文件夹' : '新建收藏夹'
    queryForm.value = Object.assign({}, row)
  } else {
    state.title = '新建收藏夹'
  }
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.add-dia {
  width: 480px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 24px;
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .close {
      cursor: pointer;
      i {
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .tool {
    margin-top: 20px;
    justify-content: center;
    .btn {
      width: 124px;
      height: 40px;
    }
    .confirm-btn {
      margin-left: 24px;
    }
  }
}
</style>
